<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>硅谷少儿英语-附近的拼班</title>
<meta name="description" content="" />
<meta name="Keywords" content="" />
<link rel="shortcut icon" href="https://www.svenglish.cn/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/nearby.css">
</head>
<body class="nearby">


<div class="nearby_page" id="nearbyPage">

  <div class="nearby_top" v-if="changeLocation">
    <div class="address">
      <i class="icon_location"></i>
      <b>{{changeLocation.poiname=='我的位置'?changeLocation.cityname:changeLocation.poiname}}</b>
      <p>{{changeLocation.poiaddress}}</p>
      <span class="btn btn_min btn_line" @click="showSearch=true">更换地点</span>
    </div>
  </div>

  <div class="course_filter clearfix">
    <select class="select course_select" v-model="courseId">
      <option value="">所有课程</option>
      <option value="10001">启蒙班（适合英语零基础的孩子）</option>
      <option value="10002">基础班（适合已有一年左右英语学习基础的孩子）</option>
      <option value="10003">进阶班（适合已有两年及以上英语学习基础的孩子）</option>
    </select>
    <div>为您匹配到 <span class="orange">{{nearbyList.length}}</span> 个附近的拼班</div>
  </div>

  <ul class="group_list">
    <li v-for="item in nearbyList" @click='goDetail(item.groupOrderId)'>
      <div class="group_img">
        <img v-if="item.courseId==10001" src="images/detail/a_cover.jpg" alt="">
        <img v-else src="images/detail/b_cover.jpg" alt="">
      </div>
      <h4>{{getValue(item.courseId,'name')}}</h4>
      <p>{{getValue(item.courseId,'info')}}</p>
      <p><b>距离：</b>{{getDistance(item.distance)}}，{{item.place}}附近</p>
      <p><b>剩余名额：</b>{{item.groupMaxNumber - item.joinNumber}}人</p>
    </li>
  </ul>

  <div class="no_nearby" v-if="!nearbyList.length">
    <p><b>您的附近暂时还没有匹配的班级！</b></p>
    <p>您可以点击下方按钮，免费发起自己的拼班，让您的朋友或周围的人前来参加！满2人即可安排外教上门试听哟！</p>

    <a class="btn" href="order.html">发起拼班</a>
  </div>
  

  <!-- 地址补全弹窗 -->
  <div class="location_search" :class="{'show':showSearch}">
    <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=5GVBZ-IJXLI-SE6GQ-5RUSL-I2PDF-XVB73&referer=myapp"></iframe>
  </div>


</div>

<footer class="appFoot">
  <a href="index.html"><span class="appFoot-itemText">免费试听</span></a>
  <a href="course-1.html"><span class="appFoot-itemText">了解课程</span></a>
  <a href="myOrder.html"><span class="appFoot-itemText">我的...</span></a>
  <a href="about.html"><span class="appFoot-itemText">关于我们</span></a>
</footer>


<script src="js/zepto.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/common.js"></script>
<script src="js/nearby.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133564697-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-133564697-1');
</script>
</body>
</html>
